<script setup lang='ts'>
import { apiDetail } from '@/api/order'
import { add } from 'lodash-es'

const visible = ref(false)
const loading = ref(false)

const orderData = ref({})

function formatDate(timestamp: number) {
    const date = new Date(timestamp)
    const [year, month, day, hour, minutes, seconds] = [date.getFullYear(), date.getMonth() + 1, date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds()]

    function patchZero(value: number) {
        return ('0' + value).slice(-2)
    }

    return `${year}-${patchZero(month)}-${patchZero(day)} ${patchZero(hour)}:${patchZero(minutes)}:${patchZero(seconds)}`
}


const hotelData = computed(() => {
    if (!orderData.value.hasOwnProperty('hotelInfo')) return []
    const { hotelInfo } = orderData.value
    return hotelInfo.map((item: any) => {
        const { hotel_name, order_no, price, value, type_name, merchantInfo: { tel, title, addr } } = item

        return {
            hotelName: hotel_name,
            orderNo: order_no,
            price,
            value,
            typeName: type_name,
            tel,
            hotelTitle: title,
            hotelAddress: addr
        }
    })
})

async function initData(id: any) {
    loading.value = true
    const resp = await apiDetail(id)
    visible.value = true
    const { pay_time, pay_type } = resp
    const payTypeEnum = {
        '20': '微信支付'
    }
    resp.pay_time = formatDate(pay_time * 1000)
    if (payTypeEnum.hasOwnProperty(pay_type)) {
        resp.pay_type = payTypeEnum[pay_type]
    }
    orderData.value = resp
    loading.value = false
    console.log(resp, 'resp')
}

defineExpose({
    initData
})

function closeHandle() {
    visible.value = false
}

</script>

<template>
    <div>
        <el-dialog
            v-model='visible'
            title='订单详情'
            width='1200px'
        >
            <div v-loading='loading'>
                <el-descriptions
                    title='用户信息'
                    :column='4'
                    border
                    class='order-detail-margin'
                >
                    <el-descriptions-item width='100px' label='用户姓名'>{{ orderData.linkman_name }}
                    </el-descriptions-item>
                    <el-descriptions-item label='联系方式'>{{ orderData.linkman_tel }}</el-descriptions-item>
                    <el-descriptions-item label='成人数量'>{{ orderData.adult_num }}</el-descriptions-item>
                    <el-descriptions-item label='儿童数量'>{{ orderData.child_num }}</el-descriptions-item>
                    <el-descriptions-item label='老人数量'>{{ orderData.old_num }}</el-descriptions-item>
                    <el-descriptions-item label='预定房间数量'>{{ orderData.room_num }}</el-descriptions-item>
                    <el-descriptions-item label='备注信息'>{{ orderData.linkman_remake || '无' }}</el-descriptions-item>
                </el-descriptions>
                <el-descriptions
                    title='订单信息'
                    :column='4'
                    border
                    class='order-detail-margin'

                >
                    <el-descriptions-item label='订单编号'>{{ orderData.order_no }}</el-descriptions-item>
                    <el-descriptions-item label='订单金额'>{{ orderData.order_price }}</el-descriptions-item>
                    <el-descriptions-item label='出行时间'>{{ orderData.start_time }}</el-descriptions-item>
                    <el-descriptions-item label='下单时间'>{{ orderData.create_time }}</el-descriptions-item>
                    <el-descriptions-item label='支付时间'>{{ orderData.pay_time }}</el-descriptions-item>
                    <el-descriptions-item label='支付方式'>{{ orderData.pay_type }}</el-descriptions-item>
                </el-descriptions>

                <el-table :data='hotelData' border>
                    <el-table-column label='酒店名称' prop='hotelName' />
                    <el-table-column label='预定房型' prop='typeName' />
                    <el-table-column label='预定房间数' prop='value' />
                    <el-table-column label='价格' prop='price' />
                    <el-table-column label='单号' prop='orderNo' />
                </el-table>
            </div>
            <template #footer>
                <el-space>
                    <el-button type='primary' @click='closeHandle'>关闭</el-button>
                </el-space>
            </template>
        </el-dialog>
    </div>
</template>

<style scoped lang='scss'>
.order-detail-margin {
    margin-bottom: 24px;
}
</style>
